<template>
  <div>
    <el-form label-width="auto" :model="searchData" style="max-width: 600px">
      <el-form-item label="分类">
        <el-input v-model="searchData.category" class="myInput" />
      </el-form-item>
      <el-form-item label="搜索的关键字">
        <el-input v-model="searchData.search" />
      </el-form-item>
      <el-form-item>
        <el-button class="loginBtn" type="primary" @click="getGoodsList">
          查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button class="loginBtn" type="primary" @click="excelToUseJson">
          excel导出（用json）
        </el-button>
 
      </el-form-item>
      <el-upload
        ref="upload"
        class="upload-demo"
        :limit="1"
        :on-change="changeFn"
        :on-exceed="handleExceed"
        :auto-upload="false"
        :show-file-list="false"
      >
        <template #trigger>
          <el-button type="primary" >excel导入</el-button>
        </template>
      </el-upload>
    </el-form>
  </div>
  <el-table id="table01" :data="goodsList" style="width: 100%">
    <el-table-column prop="proid" label="编号" width="350" />
    <el-table-column prop="proname" label="名称" width="150" />
    <el-table-column prop="category" label="分类" width="150" />
    <el-table-column prop="brand" label="品牌" width="150" />
    <el-table-column label="图片" width="150">
      <template #default="scope">
        <img :src="scope.row.img1" style="width: 100px; height: 100px" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type {
  UploadInstance,
  UploadProps,
  UploadRawFile,
  UploadFile,
} from "element-plus";
import { getGoodsListApi } from "@/api/goods";
import type { ISearchGoods } from "@/myTypes";
import {
  excelExport,
  excelExportUseJson,
  excelImport,
} from "@/utils/excelTools.js";

// 定义查询条件的数据
const searchData = reactive<ISearchGoods>({
  category: "",
  search: "",
});

interface IGoods {
  proid?: string;
  category?: string;
  brand?: string;
  proname?: string;
  originprice?: number;
  sales?: number;
  stock?: number;
  issale?: number;
  isrecommend?: number;
  discount?: number;
  isseckill?: number;
  img1?: string;
}
const goodsList = reactive<Array<IGoods>>([
  {
    proid: "pro_dd3bc452-3f9e-4033-b007-4ddf791b4529",
    category: "口红",
    brand: "Dior迪奥",
    proname: "【官方正品】全新Dior迪奥烈艳蓝金唇膏传奇新色丝绒999 720",
    originprice: 356,
    sales: 44460,
    stock: 50000,
    issale: 1,
    isrecommend: 1,
    discount: 8,
    isseckill: 1,
    img1: "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics6.baidu.com%2Ffeed%2F279759ee3d6d55fbf9cd53e27b6d8b4721a4dd43.jpeg%40f_auto%3Ftoken%3Dcdaf5d54688f9ca0d8456413c22a94d8&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1711645200&t=ce8cda6b6681191812e737ac145612c7",
  },
]);

function getGoodsList() {
  getGoodsListApi(searchData).then((res) => {
    if (res.data.code == "200") {
      goodsList.length = 0;
      goodsList.push(...res.data.data);
    }
  });
}

getGoodsList();

// excel导出：
const excelToUseJson = () => {
  //参数：
  // data：数据，是json数组格式
  // headers：表头
  // filename：导出的文件名
  excelExportUseJson(
    goodsList,
    {
      proid: "商品编号",
      category: "分类",
      brand: "品牌",
      proname: "商品名称",
      originprice: "原价",
      sales: "销量",
      img1:"图片"
    },
    "goods"
  );
};
const excelToUseDom = () => {
  excelExport(document.getElementById("table01"), "goodsDom");
};

const fromExcel = (e: any) => {
  if (e.target.files && e.target.files.length > 0) {
    excelImport(e.target.files[0]).then((arr: any) => {
      bannerList.length = 0;
      arr.forEach((item: any) => {
        bannerList.push({
          bannerid: item["编号"],
          img: item["图片"],
          flag: item["是否启用"],
          link: item["跳转连接"],
          alt: item["图片提示"],
        });
      });
    });
  }
};

const upload = ref<UploadInstance>();

const handleExceed: UploadProps["onExceed"] = (files) => {
  console.log("handleExceed");

  upload.value!.clearFiles();

  const file = files[0] as UploadRawFile;

  upload.value!.handleStart(file);
};

const changeFn = (file: UploadFile) => {
  console.log("changeFn");

  excelImport(file.raw as File).then((arr: any) => {
    console.log("arr", arr);
    goodsList.length = 0;
    // goodsList.push(...arr);
    arr.forEach((item:any)=>{
      goodsList.push({
        "proid":item["商品编号"],
        "proname":item["商品名称"],
        "category": item["分类"],
        "brand":item["品牌"],
        "img1": item["图片"]
      });
    })

  });

};
</script>

<style lang="scss" scoped></style>
